<template>
  <div>
    <div>
      <m-input v-model="massage"></m-input>
      <p>{{massage}}</p>
      <button @click="massage += 1">+1</button>
    </div>
    <m-input value="张三"></m-input>
    <m-input value="张三" disabled></m-input>
    <m-input value="王五" error="姓名不能少于两个字"></m-input>
    <div style="display:none">
      <m-button icon="xia" icon-position='right'>
      下载
    </m-button>
    <m-button icon="shezhi" icon-position='left'>
      下载
    </m-button>
    <!-- 冒号必须加 要传js 的 true -->
    <m-button icon="loading" :loading="loading" icon-position='right' @click="loading=!loading">
      加载
    </m-button>
    </div>
  </div>
</template>
<script>
  import "./assets/styles/global.styl";
  import mButton from "./components/button.vue";
  import mInput from "./components/input.vue";
  import mIcon from "./components/icon.vue";
  export default {
    name: "App",
    data(){
      return{
        loading:false,
        massage:"hi"
      }
    },
    components: {
      mButton,
      mIcon,
      mInput
    },
  };
</script>
<style lang="stylus">
 
</style>
